<template>
    <view
        :class="'am-popup ' + (propClassname || '') + ' ' + (propShow || false ? 'am-popup-show' : '') + ' ' + (propAnimation || true ? 'animation' : '')"
        :disable-scroll="propDisablescroll"
    >
        <view class="am-popup-mask" v-if="propMask || true" @click="onMaskTap"></view>
        <view :class="'am-popup-content am-popup-' + (propPosition || 'bottom')">
            <slot></slot>
        </view>
    </view>
</template>

<script>
// components/popup.js
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        propClassname: String,
        propShow: Boolean,
        propPosition: String,
        propMask: Boolean,
        propAnimation: Boolean,
        propDisablescroll: Boolean
    },
    /**
     * 组件的方法列表
     */
    methods: {
        onMaskTap: function onMaskTap() {
            this.$emit(
                'onclose',
                {
                    detail: {}
                },
                {}
            );
        }
    }
};
</script>
<style>
@import './popup.css';
</style>
